<%--
  Created by IntelliJ IDEA.
  User: LS
  Date: 2018/5/13
  Time: 19:41
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%
    String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/";
%>
<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>layui</title>
		<meta name="renderer" content="webkit">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="stylesheet" href="../../../resources/layui/css/layui.css" media="all">
		<script type="text/javascript" src="../../../resources/js/jquery-1.11.1.min.js"></script>
	</head>

	<body>
		<style>
			.ffr {
				float: right;
			}
			
			@media screen and (max-width: 540px) {
				.layui-btn {
					display: inline-block;
					height: 30px;
					line-height: 30px;
					padding: 0 5px;
					color: #fff;
					white-space: nowrap;
					text-align: center;
					font-size: 14px;
					border: none;
					border-radius: 2px;
					cursor: pointer;
				}
				.ffr {
					position: absolute;
				}
				.frrr {
					float: right;
				}
				.wid {
					width: 120px;
					height: 30px;
				}
				.display {
					display: none;
				}
				.widd {
					height: 35px;
				}
			}
		</style>
		<div style="" class="widd ">
			<div class="layui-inline frrr">
				<a class="layui-btn layui-btn-md layui-btn-danger">批量删除</a>
				<a id="adduser" class="layui-btn layui-btn-normal">添加用户</a>
			</div>
			<div class="ffr" style="min-width: 152px;">
				<div style="float: left;line-height:40px" class="display">
					搜索用户：
				</div>
				<div style="float: left;margin-right: 10px">
					<input name="username" class="layui-input wid" id="demoReload" autocomplete="off" placeholder="输入用户名检索">
				</div>
				<div style="float: right">
					<button class="layui-btn" lay-submit data-type="reload" type="submit" lay-filter="search" id="search">搜索</button>
				</div>
			</div>
		</div>
		<table class="layui-hide" id="test" lay-filter="user"></table>

		<script type="text/html" id="barDemo">
			<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon-set layui-icon"></i>编辑</a>
			<a class="layui-btn layui-btn-danger layui-btn-xs " lay-event="del"><i class="layui-icon-close layui-icon"></i>删除</a>
		</script>

		<script src="../../../resources/layui/layui.js" charset="utf-8"></script>
		<script>
			layui.use('table', function() {
				var loading = layer.msg('加载数据库中,请稍后......', {
					icon: 16,
					shade: 0.01
				});
				var table = layui.table;
				//方法级渲染
				table.render({
					elem: '#test',
					url: '/users/queryAllUsers.action',
					height: '480',
					limit: 6,
					limits: [6, 10, 20],
					page: true,
					cols: [
						[{
							type: 'checkbox',
							fixed: 'left'
						}, {
							field: 'userId',
							width: 200,
							title: '用户ID',
							sort: true,
							align: 'center',
						}, {
							field: 'userName',
							width: 200,
							title: '用户名',
							align: 'center'
						}, {
							field: 'userEmail',
							width: 250,
							title: '邮箱',
							sort: true,
							align: 'center'
						}, {
							field: 'createTime',
							width: 250,
							title: '注册时间',
							align: 'center',
							sort: true
						}, {
							field: 'userState',
							width: 250,
							title: '用户状态',
							sort: true,
							align: 'center'
						}, {
							field: 'userRoleId',
							width: 242,
							title: '用户权限',
							sort: true,
							align: 'center'
						}, {
							width: 250,
							title: '操作',
							sort: true,
							toolbar: '#barDemo',
							align: 'center'
						}]
					],
					id:"testReload",
					request:{
						pageName:"pageCount",
						limitName:"pageSize"
					},
					done: function() {
						layer.close(loading);
					}
				});
//				      var $ = layui.$, active = {
//				          reload: function () {
//				              var demoReload = $('#demoReload');
//				              //执行重载
//				              table.reload('testReload', {
//				                  page: {
//				                      curr: 1 //重新从第 1 页开始
//				                  },
//				                 request: {
//									pageName: 'curr' //页码的参数名称，默认：page
//									,limitName: 'nums' //每页数据量的参数名，默认：limit
//								} 
//				              });
//				          }
//				      };
//				      $('#search').on('click', function () {
//				          var type = $(this).data('type');
//				          active[type] ? active[type].call(this) : '';
//				      });

				      $('#adduser').on('click', function () {
				            layer.open({
				                type: 2,
				                title: '添加用户',
				                maxmin: true,
				                shadeClose: true, //点击遮罩关闭层
				                area: ['893px', '600px'],
				                content: 'adduser.jsp'
				            });
				        });
			});
		</script>

	</body>

</html>